<!doctype html>
<html>
<head>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow-x: hidden;
            overflow-y: auto;
        }

        .pages {
            position: relative;
        }

        .page {
            position: absolute;
            width: 100%;
            z-index: 1;
        }

        #page1 {
            background: #ffff00;
        }

        #page2 {
            background: #ff0000;
        }

        .page-mask {
            display: none;
            width: 100%;
            height: 100%;
            position: absolute;
            background: darkgray;
            opacity: 0.4;
        }
    </style>
</head>
<body>
<div class="pages" id="pages">
    <div class="page" id="page1">
        <div class="page-mask">

        </div>
        <div class="page-inner">
            <button class="go">go</button>

            <button class="back2">back2</button>

            <p>1</p>

            <p>1</p>

            <p>1</p>

            <p>1</p>

            <p>1</p>

            <p>1</p>

            <p>1</p>

            <p>1</p>

            <p>1</p>

            <p>1</p>

            <p>1</p>

            <p>1</p>

            <p>1</p>

            <p>1</p>

            <p>1</p>

            <p>1</p>

            <p>1</p>

            <p>1</p>

            <p>1</p>

            <p>1</p>

            <p>1</p>

            <p>1</p>

            <p>1</p>

            <p>1</p>

            <p>1</p>

            <p>1</p>]
        </div>
    </div>
</div>
<script src="/kissy/build/seed.js"></script>
<script src="/kissy/src/package.js"></script>
<script>
    KISSY.use('node', function (S, Node) {
        var $ = Node.all;
        var win = $(window);
        var winWidth = win.width();
        var currentPageIndex = 1;
        win.on('orientationchange resize', function () {
            winWidth = win.width();
            for (var i = 1; i < allPages.length; i++) {
                updateSubPage(i);
            }
            updatePagesTranslateX(currentPageIndex)
        });
        var pages = $('#pages');
        var page1 = $('#page1');
        var allPages = [];
        var go = $('#go');

        function getSubPageWidth() {
            return winWidth * 0.8;
        }

        function getOffsetLeft(i) {
            return getSubPageWidth() * (1 - i);
        }

        function updateSubPage(i) {
            if (i == 1) {
                allPages[i].css('width', winWidth);
            } else {
                allPages[i].css('width', getSubPageWidth());
                allPages[i].css('left', getSubPageWidth() * (i - 2) + winWidth);
            }
        }

        function updatePagesTranslateX(activePage) {
            pages.css('transform', 'translateX(' + getOffsetLeft(activePage) + 'px)');
        }

        allPages[1] = page1;
        updateSubPage(1);

        page1.one('.go').on('click', function () {
            goto(2, 'page2');
        });
        page1.one('.page-mask').on('click', function () {
            goto(1, 'page1');
        });
        function goto(i, id) {
            S.log('goto: ' + i);
            var page2 = allPages[i];
            if (!page2) {
                allPages[i] = page2 = page1.clone(true);
                updateSubPage(i);
                page2.attr('id', id);
                page2.appendTo(pages);

                page2.one('.page-mask').on('click', function () {
                    goto(i, 'page' + (i));
                });
                page2.one('.go').on('click', function () {
                    goto(i + 1, 'page' + (i + 1));
                });
                if (i - 2 >= 1) {
                    page2.one('.back2').on('click', function () {
                        goto(i - 2, 'page' + (i - 2));
                    });
                }
                page2.css('z-index', i + 1);
            }

            page2.one('.page-mask').hide();
            currentPageIndex = i;
            pages.animate({
                'transform': 'translateZ(0) translateX(' + getOffsetLeft(i) + 'px)'
            }, {
                duration: 0.5,
                complete: function () {
                    for (var j = 1; j < i; j++) {
                        allPages[j].one('.page-mask').show();
                    }
                },
                useTransition: true
            });
        }
    });
</script>
</body>
</html>